<nav class="mat-elevation-z6 navBarBox invert" *ngIf="userLogin">
  <div fxLayout="row">
    <!-- mobile -->
    <div fxFlex fxLayout="row" fxLayoutAlign="center center" fxShow.xs="true" fxHide="true">
      <a routerLink="/dashborad" [title]="source.logoName|translate" class="logo">
      {{source.logoName|translate}} 
      </a>
      <a href="javascript:void(0)" [title]="'菜单'|translate" class="white-text menu" (click)="slideNavHandel()" style="position: absolute;left: 14px;top: 4px;">
        <mat-icon fontIcon="fa-bars" class="animated swing fontSize-24"></mat-icon>
      </a>
    </div>
    <!-- pc -->
    <div fxFlex fxLayout="row" class="page-box" fxHide.xs="true">
      <a routerLink="/dashborad" [title]="source.logoName |translate" class="logo">
      {{source.logoName|translate}} 
      </a>
      <a href="javascript:void(0)" [title]="'菜单'|translate" class="white-text menu" (click)="slideNavHandel()">
        <mat-icon fontIcon="fa-bars" class="animated swing fontSize-24"></mat-icon>
      </a>
    </div>
    <div fxFlex fxLayoutAlign="end center" fxLayout="row" fxHide.xs="true" class="navBarBox-icon">
      <a href="javascript:;" fxLayout="row" fxLayoutAlign="start center" [matTooltip]="user.activeVersionInfo.deadLine | date:'yyyy-MM-dd'" [title]="user.activeVersionInfo.deadLine | date:'yyyy-MM-dd'">
        <span>{{'到期'| translate}}&nbsp;</span>
        <a href="javascript:;" class="progress">
          <div class="determinate" [ngStyle]="datetime"></div>
        </a>
      </a>
      <a routerLink="/setting" routerLinkActive="active" [matTooltip]="'设置' |translate">
        <mat-icon fontIcon="fa-cog" class="animated swing fontSize-24"></mat-icon>
      </a>
      <a href="javascript:;" [matTooltip]="'购买' |translate" (click)="shopping()" *ngIf="user.channel == '1'">
        <mat-icon fontIcon="fa-shopping-cart" class="animated swing fontSize-24"></mat-icon>
      </a>
      <a (click)="logOut()" [matTooltip]="'退出' |translate" href="javascript:;">
        <mat-icon fontIcon="fa-power-off" class="animated swing fontSize-24"></mat-icon>
      </a>
      <translate-menu class="translate-menu-panel"></translate-menu>
    </div>
  </div>
</nav>
<!-- 侧边栏slide -->
<mat-sidenav-container *ngIf="userLogin" class="slide-nav-box" [ngClass]="{'mat-sidenav-opened':slideNav.opened}">
  <mat-sidenav [mode]="slideNav.mode" [opened]="slideNav.opened" fxLayout="column" fxFlexFill class="slide-nav-inner">
    <!-- sidenav content -->
    <a *ngFor="let navItem of roleNavList" mat-button [routerLink]="navItem.path" routerLinkActive="active" [matTooltip]="navItem.name|translate" mdTooltipPosition="after" [matTooltipDisabled]="slideNav.tooltip" class="slide-nav-item">
      <mat-icon [fontIcon]="navItem.icon" class="animated swing"></mat-icon>
      <span class="slide-nav-item-text">{{navItem.name |translate}}</span>
    </a>
    <div class="footer-nav" fxShow.xs="true" fxHide="true">
      <div fxFlex fxLayoutAlign="center center" fxLayout="row" class="navBarBox-icon">
        <span class="fontSize-12 left pr5 pl10">{{'到期'|translate}} {{user.activeVersionInfo.deadLine | dateFormat}}</span>
        <!--  -->
        <a routerLink="/setting" routerLinkActive="active" [matTooltip]="'设置'|translate">
          <mat-icon fontIcon="fa-cog" class="animated swing fontSize-24"></mat-icon>
        </a>
        <a href="javascript:;" [matTooltip]="'购买'|translate" (click)="shopping()" *ngIf="user.channel == '1'">
          <mat-icon fontIcon="fa-shopping-cart" class="animated swing fontSize-24"></mat-icon>
        </a>
        <a (click)="logOut()" [matTooltip]="'退出'|translate" href="javascript:;">
          <mat-icon fontIcon="fa-power-off" class="animated swing fontSize-24"></mat-icon>
        </a>
      </div>
    </div>
    <!--  <a mat-button routerLink="/dashborad" routerLinkActive="active" matTooltip="行业分析" mdTooltipPosition="after" [matTooltipDisabled]="slideNav.tooltip">
      <mat-icon fontIcon="fa-signal" class="animated swing"></mat-icon>
      <span>行业分析</span>
    </a>
    <a mat-button routerLink="/word" routerLinkActive="active" matTooltip="最鲜商机" mdTooltipPosition="after" [matTooltipDisabled]="slideNav.tooltip">
      <mat-icon fontIcon="fa-tags" class="animated swing"></mat-icon>
      <span>最鲜商机</span>
    </a>
    <a mat-button routerLink="/brand" routerLinkActive="active" matTooltip="品牌数据" mdTooltipPosition="after" [matTooltipDisabled]="slideNav.tooltip">
      <mat-icon fontIcon="fa-flag" class="animated swing"></mat-icon>
      <span>品牌数据</span>
    </a>
    <a mat-button routerLink="/shop" routerLinkActive="active" matTooltip="店铺数据" mdTooltipPosition="after" [matTooltipDisabled]="slideNav.tooltip">
      <mat-icon fontIcon="fa-home" class="animated swing"></mat-icon>
      <span>店铺数据</span>
    </a>
    <a mat-button routerLink="/product" routerLinkActive="active" matTooltip="商品数据" mdTooltipPosition="after" [matTooltipDisabled]="slideNav.tooltip">
      <mat-icon fontIcon="fa-shopping-bag" class="animated swing"></mat-icon>
      <span>商品数据</span>
    </a>
     <a mat-button routerLink="/monitorBrand" routerLinkActive="active" matTooltip="品牌数据" mdTooltipPosition="after" [matTooltipDisabled]="slideNav.tooltip">
      <mat-icon fontIcon="fa-flag" class="animated swing"></mat-icon>
      <span>品牌监控</span>
    </a>
    <a mat-button routerLink="/monitorShop" routerLinkActive="active" matTooltip="店铺数据" mdTooltipPosition="after" [matTooltipDisabled]="slideNav.tooltip">
      <mat-icon fontIcon="fa-home" class="animated swing"></mat-icon>
      <span>店铺监控</span>
    </a>
    <a mat-button routerLink="/monitorProduct" routerLinkActive="active" matTooltip="商品数据" mdTooltipPosition="after" [matTooltipDisabled]="slideNav.tooltip">
      <mat-icon fontIcon="fa-shopping-bag" class="animated swing"></mat-icon>
      <span>商品监控</span>
    </a>
    <a mat-button routerLink="/monitor" routerLinkActive="active" matTooltip="实时监控" mdTooltipPosition="after" [matTooltipDisabled]="slideNav.tooltip">
      <mat-icon fontIcon="fa-eye" class="animated swing"></mat-icon>
      <span>实时监控</span>
    </a>
    <a mat-button routerLink="/attr" routerLinkActive="active" matTooltip="属性分析" mdTooltipPosition="after" [matTooltipDisabled]="slideNav.tooltip">
      <mat-icon fontIcon="fa-code" class="animated swing"></mat-icon>
      <span>属性分析</span>
    </a>
    <a mat-button routerLink="/red" routerLinkActive="active" matTooltip="网红达人" mdTooltipPosition="after" [matTooltipDisabled]="slideNav.tooltip">
      <mat-icon fontIcon="fa-firefox" class="animated swing"></mat-icon>
      <span>网红达人</span>
    </a>
    <a mat-button routerLink="/manage" routerLinkActive="active" matTooltip="控价管理" mdTooltipPosition="after" [matTooltipDisabled]="slideNav.tooltip">
      <mat-icon fontIcon="fa-gavel" class="animated swing"></mat-icon>
      <span>控价管理</span>
    </a>
    <a mat-button routerLink="/custom" routerLinkActive="active" matTooltip="数据定制" mdTooltipPosition="after" [matTooltipDisabled]="slideNav.tooltip">
      <mat-icon fontIcon="fa-comments" class="animated swing"></mat-icon>
      <span>数据定制</span>
    </a>
    <a mat-button routerLink="/question" routerLinkActive="active" matTooltip="常见咨询" mdTooltipPosition="after" [matTooltipDisabled]="slideNav.tooltip">
      <mat-icon fontIcon="fa-question-circle-o" class="animated swing"></mat-icon>
      <span>常见咨询</span>
    </a> -->
  </mat-sidenav>
  <!-- primary content -->
</mat-sidenav-container>
